<template>
  <button
    :class="classes"
    :open-type="openType"
    :disabled="disabled"
    @tap="onTap"
  >
    <slot />
  </button>
</template>

<script setup>
import { computed } from 'vue'

/**
 * TDesign Button 精简版
 * - 支持 theme: 'warning' | 'default'
 * - variant: 'text' | 'base'
 * - block: boolean
 * - shape: 'square' | 'round'
 * - openType: 透传原生 button 的 open-type
 */
const props = defineProps({
  theme: { type: String, default: 'default' },
  variant: { type: String, default: 'base' },
  block: { type: Boolean, default: false },
  shape: { type: String, default: 'round' },
  openType: { type: String, default: '' },
  disabled: { type: Boolean, default: false }
})

/**
 * 点击事件透传
 */
const emit = defineEmits(['tap'])
function onTap(e) { emit('tap', e) }

/**
 * 组合类名
 */
const classes = computed(() => {
  const list = ['t-button']
  if (props.block) list.push('t-button--block')
  if (props.variant === 'text') list.push('t-button--text')
  else list.push(`t-button--${props.theme}`)
  list.push(`t-button--${props.shape}`)
  return list.join(' ')
})
</script>

<style>
.t-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  padding: 0 24rpx;
  border-radius: 40rpx;
  border: none;
  background-color: #f5f5f5;
  color: #333;
}
.t-button--block { width: 100%; }
.t-button--warning { background-color: var(--td-brand-color, #f5a623); color: #fff; }
.t-button--text { background-color: transparent; color: #333; height: auto; padding: 0; }
.t-button--square { border-radius: 12rpx; }
.t-button[disabled] { opacity: 0.6; }
</style>
